<template>
  <div style="width: 100%; height: 100%">
    <div v-if="chartsList.length > 0" style="width: 100%; height: 100%">
      <div class="model_chart_con">
        <div class="chart-item">
          <chartsPV
            style="width: 100%; height: 100%"
            :chartsList="chartsList"
            :xaxis="xaxis"
            :color="'#3B82F6'"
            :width="'100%'"
            :height="'100%'"
            :type="type"
          />
        </div>
      </div>
    </div>
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { toRefs } from "vue";
import { reactive, onMounted, ref } from "vue";
import chartsPV from "./chartsPV.vue";
import { queryChartForHour } from "@/api/waterKanban";
import { queryChildByTypeCodeAndItemValue } from "@/api/waterClass";
onMounted(() => {
  byEvents();
});
const props = defineProps({
  type: {
    type: String,
    default: ""
  },
  autoplay: {
    type: Boolean,
    default: false
  }
});
const state = reactive({
  chartsList: [],
  xaxis: []
});
const { chartsList, xaxis } = toRefs(state);

const byEvents = async () => {
  // const arr = ["PCWPVZB004", "PCWPVZB004B", "PCWPVZB004C", "PCWPVZB004A"];
  const arr = ["PCWPVZB004"];
  const response1: any = await queryChildByTypeCodeAndItemValue({
    value: "PCWPVZB",
    typeCode: "MCTS"
  });
  const dataList: any = response1.filter(el => arr.includes(el.itemValue)) || [];
  const nameList: any = dataList.map(e => JSON.parse(e.itemDesc.replace(/[\r|\n|\t]/g, ""))?.name || "");
  const titleList: any = Array.from(new Set(nameList));
  queryChartForHour({ dictTypeCode: "MCTS", dictKey: "PCWPVZB" }).then((response: any) => {
    xaxis.value = response.xaxis && response.xaxis.length ? response.xaxis.map(e => e.split(" ")[1]) : [];
    chartsList.value = response.panelList && response.panelList.length ? response.panelList.filter(el => titleList.includes(el.title)) : [];
  });
};
</script>
<style scoped lang="scss">
.arrowdiv {
  position: absolute;
  top: 10px;
  right: 0;
  z-index: 99999;
  width: 110px;
  height: 20px;

  i {
    cursor: pointer;
  }
}

.model_chart_con {
  width: 100%;
  height: 100%;

  .chart-item {
    width: 100%;
    height: 100%;
  }
}

:deep(.px-carousel__container) {
  position: relative;
  height: 100%;
}

:deep(.px-carousel__indicators--horizontal) {
  bottom: -15px;
}
</style>
